<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     #div{
         width: 500px;height: 250px;
         background-color: antiquewhite;
         border: 1px solid black;
         line-height: 250px;
         font-size: 36px;
         text-align: center;
     }
    </style>
</head>
<body>
    <div id="div">将文件拖入此处上传</div>
    <script src="axios.min.js"></script>
    <script>
        let div = document.getElementById('div');
        div.addEventListener('dragover',function(event){
            event.preventDefault();//正常出发事件
        });
        div.addEventListener('drop',function(event){
            event.stopPropagation();
            event.preventDefault();
            console.log(event);//输出事件对象
          //后去拖拽进来的文件信息  不能传文件家
          let files = event.dataTransfer.files;
          console.log(files);//输出拖拽的文件 
        })
   
       let f = fils[0];//选择的第一个文件 
      //给予axios 发送ajax请求，上窜文件
      //uploadFile 是服务器接受文件时使用的字段名，需哟啊与服务端接收时的字
      fd.append('uploadFile',f);
      axios.post('http://localhost:3000/upload',fd);








    </script>
</body>
</html>